<template>
  <div class="layout-header">
    <div class="navbar">
      <breadcrumb></breadcrumb>
      <div class="vertical-header-right">
        <span class="setting-icon" @click="openSetting">
          <el-icon><Setting /></el-icon>
        </span>
      </div>
    </div>
    <tags-view v-show="showTagsView"></tags-view>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Breadcrumb from "./components/Breadcrumb/index.vue";
import TagsView from "./components/TagsView/index.vue";
import { getStore } from "@/utils/localStorage";
import { emitter } from "@/utils/mitt";
const openSetting = () => {
  emitter.emit("openDrawer");
};
/** 是否隐藏标签页，默认显示 */
const showTagsView = ref(getStore({ name: "configure" }).showTagsView) ?? ref(true);
</script>
<style scoped lang="scss">
.layout-header {
  .navbar {
    width: 100%;
    height: 48px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 21, 41, 0.08);
    .vertical-header-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 280px;
      height: 48px;
      color: #000000d9;
      .setting-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 48px;
        cursor: pointer;
        &:hover {
          background: #f6f6f6;
        }
      }
    }
  }
}
</style>
